<template>
  <view class="mine" v-cloak>
    <view class="mine-header">
      <view class="header-title">
        <h2>{{info.nickName}}</h2>
        <p>添加个人简介,让大家更懂你~</p>
      </view>
     <view class="header-img" v-if="isMp">
        <button class="button" type="primary" open-type="chooseAvatar" @chooseavatar="getChooseAvatar" ></button>
        <image class="img-pic" :src="info.avatar ? info.avatar : 'https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/empty/logo.png'"></image>
        <view class="img-edit"> <uni-icons type="camera" size="18" color="#fff"></uni-icons> </view>
      </view>
     <view class="header-img" v-else @click="handleChoiseImg">
        <image class="img-pic" :src="info.avatar ? info.avatar : 'https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/empty/logo.png'"></image>
        <view class="img-edit"> <uni-icons type="camera" size="18" color="#fff"></uni-icons> </view>
      </view>
    </view>
    <view class="mine-list">
      <view class="list-item" @click="handleChange('person')">
        <image src="@/static/my_info.png" mode="widthFix"></image>
        <h3>个人资料</h3>
        <uni-icons color="#979899" size="20" type="forward"></uni-icons>
      </view>
      <view class="list-item" @click="handleChange('safe')">
        <image src="@/static/my_pwd.png" mode="widthFix"></image>
        <h3>账号安全</h3>
        <uni-icons color="#979899" size="20" type="forward"></uni-icons>
      </view>
    </view>
    <button class="mine-button" @click="handleGetOut">退出登录</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info:{},
        ossData:{},
        isMp:false
      };
    },
    onLoad() {
      /*#ifdef MP-WEIXIN*/
      this.isMp = true
      /*#endif*/
      this.$get('/common/external/aliyun/getToken').then(res=>{
        this.ossData = res.content
      })
    },
    onShow() {
      this.info = uni.getStorageSync('user')
    },
    methods:{
      getChooseAvatar(e) {
        let channel = 'activity-weixin-h5'
        /*#ifdef MP-WEIXIN*/
        channel = 'activity-weixin-mini'
        /*#endif*/
        // #ifdef MP-TOUTIAO
        channel = 'event-douyin-mini'
        // #endif
        const relaUrl = this.ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
        uni.uploadFile({
          url: this.ossData.host, //仅为示例，非真实的接口地址
          filePath: e.detail.avatarUrl,
          name: 'file',
          formData: {
            key: relaUrl,
            OSSAccessKeyId: this.ossData.accessid,
            policy: this.ossData.policy,
            Signature: this.ossData.signature,
          },
          header: {
            sassAppId:this.$sassAppId,
            token: uni.getStorageSync('token'),
            channel,
          },
          success: (uploadFileRes) => {
            this.info.avatar = this.ossData.host + '/' + relaUrl
            this.$put('/mb/users',{
              "avatar": this.ossData.host + '/' + relaUrl,
            },1)
            uni.setStorageSync('userinfo',{
              ...uni.getStorageSync('userinfo'),
              avatar:this.ossData.host + '/' + relaUrl
            })
			uni.setStorageSync('user',{
			  ...uni.getStorageSync('user'),
			  avatar:this.ossData.host + '/' + relaUrl
			})
          },
          fail: (res) => {
            this.$toast('上传失败')
          }
        })
      },
      handleChoiseImg(){ ///  选择图片
        let channel = 'activity-weixin-h5'
        /*#ifdef MP-WEIXIN*/
        channel = 'activity-weixin-mini'
        /*#endif*/
        // #ifdef MP-TOUTIAO
        channel = 'event-douyin-mini'
        // #endif
        uni.chooseImage({
        	count: 1, //默认9
        	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        	sourceType: ['album'], //从相册选择
        	success: (res) => {
            const relaUrl = this.ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
            uni.uploadFile({
              url: this.ossData.host, //仅为示例，非真实的接口地址
              filePath: res.tempFilePaths[0],
              name: 'file',
              formData: {
                key: relaUrl,
                OSSAccessKeyId: this.ossData.accessid,
                policy: this.ossData.policy,
                Signature: this.ossData.signature,
              },
              header: {
                sassAppId:this.$sassAppId,
                token: uni.getStorageSync('token'),
                channel,
              },
              success: (uploadFileRes) => {
                this.info.avatar = this.ossData.host + '/' + relaUrl
                this.$put('/mb/users',{
                  "avatar": this.ossData.host + '/' + relaUrl,
                },1)
                uni.setStorageSync('userinfo',{
                  ...uni.getStorageSync('userinfo'),
                  avatar:this.ossData.host + '/' + relaUrl
                })
				uni.setStorageSync('user',{
				  ...uni.getStorageSync('user'),
				  avatar:this.ossData.host + '/' + relaUrl
				})
              },
              fail: (res) => {
                this.$toast('上传失败')
              }
            })
        	}
        });
      },
      handleChange(e){  ///  点击个人资料
        uni.navigateTo({
          url:'/minePackage/mine-setting?type='+e
        })
      },
      handleGetOut(){  // 点击退出登录
        uni.removeStorageSync('userinfo')
        uni.removeStorageSync('token')
        uni.removeStorageSync('openID')
        uni.reLaunch({
          url:'/pages/other/login'
        })
      },
    }
  }
</script>

<style lang="less" scoped>
page{
  background: #f6f7f8;
}
.mine{
  min-height: 100vh;
  padding: 0 48rpx;
  .mine-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 48rpx 0;
    .header-img{
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      border: 8rpx solid #fff;
      box-shadow: 8rpx 32rpx 100rpx 0 rgba(107, 114, 128, 0.12);
      .button{
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        opacity: 0;
        position: absolute;
        left: 0;
        top:0;
      }
      .img-pic{
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
      .img-edit{
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
      }
    }
    h2{
      color: #30383F;
      font-size: 48rpx;
      font-weight: 500;
      margin-bottom: 24rpx;
    }
    p{
      font-size: 24rpx;
      color: #90989F;
    }
  }  //  .mine-header end
  
  .mine-list{
    margin-top: 24rpx;
    .list-item{
      background: #fff;
      padding: 24rpx;
      display: flex;
      align-items: center;
      margin-bottom: 48rpx;
      border-radius: 24rpx;
      image{
        width: 80rpx;
        height: 80rpx;
      }
      h3{
        font-size: 28rpx;
        color: #313233;
        margin: 0 auto 0 32rpx;
      }
    }
  } ///  mine-list end
  
  .mine-button{
    line-height: 88rpx;
    color: #FF6933;
    border: 1px solid #FF6933;
    font-size: 32rpx;
    border-radius: 24rpx;
    position: absolute;
    bottom: 80rpx;
    left: 24rpx;
    right: 24rpx;
    font-weight: 500;
  }
}  /// .mine end 
</style>
